<template>
  <div>
    <a-form-model
      ref="formModel"
      :model="form"
      layout="inline"
      class="search-form"
      :rules="formRules"
    >
      <!-- :labelCol="{sm: 2 ,md: 2,lg: 2,xl: 2,xxl: 5}" -->
      <!-- <a-col :sm="10"  :md="10" :lg="10" :xl="10" :xxl="5"> -->
      <div class="search-box">
        <a-form-model-item class="search-item" prop="name" label="操作账号">
          <a-input
            autocomplete="off"
            v-model="form.name"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item class="search-item" prop="sortType" label="事件类型">
          <a-select
            :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
            @change="handleEventTypeChange"
            v-model="form.eventType">
            <a-select-option
              v-for="(d, i) in eventTypeMap"
              :key="i"
              :value="d.key"
              >{{ d.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          class="search-item"
          prop="ip"
          style="margin-right: 0"
          label="IP"
        >
          <a-input
            autocomplete="off"
            v-model="form.ip"
          ></a-input>
        </a-form-model-item>
        <a-form-model-item
          class="search-item"
          prop="resultType"
          label="事件结果"
        >
          <a-select
            :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
            v-model="form.resultType">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">成功</a-select-option>
            <a-select-option value="0">失败</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item class="search-item" prop="type" label="操作类型">
          <a-select
            :getPopupContainer="
            triggerNode => {
              return triggerNode.parentNode || document.body;
            }"
            v-model="form.type">
            <a-select-option
              v-for="(d, i) in actionTypeMap"
              :key="d.key + '_' + i"
              :value="d.key"
              >{{ d.label }}</a-select-option
            >
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          class="search-item"
          prop="dateRange"
          label="请求时间"
        >
          <a-range-picker
            v-model="form.dateRange"
            inputReadOnly
            :placeholder="['开始时间', '结束时间']"
            :disabled-date="disabledDate"
            format="YYYY/MM/DD HH:mm:ss"
            :show-time="true"
          />
        </a-form-model-item>
        <div class="search-item">
          <a-button
            type="primary"
            @click="loadData(true)"
            icon="search"
            style="margin-left: 12px"
            >查询</a-button
          >
          <a-button
            @click="resetSearchForm"
            icon="reload"
            style="margin-left: 12px"
            >重置</a-button
          >
        </div>
      </div>
      <!-- <a-row class="search-tool-row">
        <a-col :span="5">
          <a-form-model-item
            prop="name"
            label="操作账号"
          >
            <a-input
              autocomplete="off"
              v-model="form.name"
              :allowClear="false"
            ></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="5">
          <a-form-model-item
            prop="sortType"
            label="事件类型"
          >
            <a-select v-model="form.eventType">
              <a-select-option
                v-for="(d, i) in eventTypeMap"
                :key="i"
                :value="d.key"
              >{{ d.label }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="5">
          <a-form-model-item
            prop="ip"
            style="margin-right: 0;"
            label="IP"
          >
            <a-input
              autocomplete="off"
              v-model="form.ip"
              :allowClear="false"
            ></a-input>
          </a-form-model-item>
        </a-col>

        <a-col :span="8">
          <a-form-model-item
            prop="dateRange"
            label="请求时间"
          >
            <a-range-picker
              v-model="form.dateRange"
              inputReadOnly
              :placeholder="['开始时间', '结束时间']"
              :disabled-date="disabledDate"
              format="YYYY/MM/DD HH:mm:ss"
              :show-time="true"
            />
          </a-form-model-item>
        </a-col>
      </a-row>

      <a-row class="search-tool-row">
        <a-col :span="5">
          <a-form-model-item
            prop="resultType"
            label="事件结果"
          >
            <a-select v-model="form.resultType">
              <a-select-option value=''>全部</a-select-option>
              <a-select-option value='1'>成功</a-select-option>
              <a-select-option value='0'>失败</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>

        <a-col :span="5">
          <a-form-model-item
            prop="type"
            label="操作类型"
          >
            <a-select v-model="form.type">
              <a-select-option
                v-for="(d, i) in actionTypeMap"
                :key="d.key + '_' + i"
                :value="d.key"
              >{{ d.label }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="5" class="flex-reverse">
          <div style="line-height: 40px;">
            <a-button
              type="primary"
              @click="loadData(true)"
              icon="search"
              style="margin-left: 12px"
            >查询</a-button>
            <a-button
              @click="resetSearchForm"
              icon="reload"
              style="margin-left: 12px"
            >重置</a-button>
          </div>
        </a-col>
      </a-row> -->
    </a-form-model>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span slot="sortCol" slot-scope="text, record, index">
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
      <a-tooltip
        slot="logContent"
        slot-scope="text"
        placement="topLeft"
        :title="text"
      >
        <span>{{ text }}</span>
      </a-tooltip>
      <a-tooltip
        slot="moduleContent"
        slot-scope="text"
        placement="topLeft"
        :title="text"
      >
        <span>{{ text }}</span>
      </a-tooltip>
    </a-table>
  </div>
</template>

<script>
import moment from "moment";
import { GwListMixin } from "@/mixins/GwListMixin";
import { getAction } from "@/api/manage";

export default {
  name: "ActionLog",
  mixins: [GwListMixin],
  data() {
    return {
      // 表头
      columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "请求时间",
          dataIndex: "createTime",
          width: 100,
        },
        {
          title: "操作账号",
          dataIndex: "username",
          width: 80,
        },
        {
          title: "IP",
          dataIndex: "ip",
          width: 100,
        },
        {
          title: "事件类型",
          dataIndex: "operateType",
          width: 50,
          customRender: (text) =>
            [10, 20, 21, 9].includes(text) ? "系统" : "业务",
        },
        {
          title: "模块名称",
          dataIndex: "module",
          ellipsis: true,
          scopedSlots: { customRender: "moduleContent" },
          width: 100,
        },
        {
          title: "日志内容",
          dataIndex: "logContent",
          ellipsis: true,
          width: 200,
          scopedSlots: { customRender: "logContent" },
        },
        {
          title: "操作类型",
          dataIndex: "operateTypeName",
          width: 80,
        },
        {
          title: "事件结果",
          dataIndex: "statusName",
          width: 50,
        },
      ],
      formRules: {
        name: [
          {
            validator: this.validators.noWhitespace(),
            trigger: "change",
          },
          {
            validator: this.validators.noIllegalString(),
            trigger: "change",
          },
          {
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "change",
          },
        ],
        logContent: [
          {
            validator: this.validators.noWhitespace(),
            trigger: "change",
          },
          {
            validator: this.validators.noIllegalString(),
            trigger: "change",
          },
          {
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "change",
          },
        ],
        ip: [
          {
            validator: this.validators.noWhitespace(),
            validator: this.validators.isValidIp(),
            trigger: "change",
          },
        ],
        dateRange: [{ validator: this.validators.datetimeValidator() }],
      },
      resultMap: ["全部", "成功", "失败"],
      actionTypeMap: [{ key: "", label: "全部" }],
      eventTypeMap: [
        { key: "", label: "全部" },
        { key: "0", label: "业务" },
        { key: "1", label: "系统" },
      ],
      sortMap: [
        "时间降序",
        "时间升序",
        "IP降序",
        "IP升序",
        "用户名升序",
        "用户名降序",
        "操作类型升序",
        "操作类型降序",
      ],
      form: {
        dateRange: [],
        name: "",
        logContent: "",
        ip: "",
        type: "",
        eventType: "",
        resultType: "",
        sortType: 0,
      },
    };
  },
  mounted() {
    this.loadData();
    this.loadActionTypeList();
  },
  methods: {
    handleEventTypeChange() {
      if (parseInt(this.form.eventType) === 1) {
        this.loadActionTypeList(true);
      } else if (parseInt(this.form.eventType) === 0) {
        this.loadActionTypeList(false);
      } else {
        this.loadActionTypeList();
      }
      this.form.type = "";
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current > moment().endOf("day");
    },
    loadData(isDoSearch) {
      this.$refs.formModel.validate((error) => {
        if (!error) {
          return;
        }
        this.gQueryParam.username = this.form.name;
        this.gQueryParam.operateType = this.form.type;
        this.gQueryParam.ip = this.form.ip;
        this.gQueryParam.logContent = this.form.logContent;
        this.gQueryParam.status = this.form.resultType;
        this.gQueryParam.orderType = this.form.sortType;
        this.gQueryParam.eventType = this.form.eventType;
        this.gQueryParam.startTime =
          this.form.dateRange.length > 0
            ? this.form.dateRange[0].format("YYYY/MM/DD HH:mm:ss")
            : "";
        this.gQueryParam.endTime =
          this.form.dateRange.length > 0
            ? this.form.dateRange[1].format("YYYY/MM/DD HH:mm:ss")
            : "";
        if (isDoSearch) {
          this.gQueryParam.pageNo = 1;
          this.gPagination.current = 1;
        }
        this.gQueryParam.logType = [0, 5];
        this.gQueryParam.excludeOperateType = [11, 19];
        this.gQueryParam.title = "操作日志";
        getAction("/sys/log/list", this.gQueryParam).then((res) => {
          if (res.success) {
            this.gDataSource = res.result.records;
            this.gPagination.total = res.result.total;
          }
        });
      });
    },
    loadActionTypeList(isSystem) {
      this.actionTypeMap = [{ key: "", label: "全部" }];
      const postData = {
        logType: 0,
        excludeOperateType: [11],
        isSystem: isSystem,
      };

      if (isSystem != null && isSystem == false) {
        postData.includeOperateType = [];
        postData.title = "系统管理-易分析日志-操作日志"
      } else {
        postData.includeOperateType = [9];
      }

      getAction("/sys/log/operate_type_list", postData).then((res) => {
        if (res.success) {
          this.actionTypeMap = this.actionTypeMap.concat(
            res.result.map((item) => {
              return {
                key: item.value,
                label: item.name,
              };
            })
          );
        }
      });
    },
    resetSearchForm() {
      this.form.dateRange = [];
      this.form.name = "";
      this.form.logContent = "";
      this.form.ip = "";
      this.form.eventType = "";
      this.form.type = "";
      this.form.resultType = "";
      this.form.sortType = 0;
      this.handleEventTypeChange();
      this.$refs.formModel.resetFields();
    },
  },
};
</script>

<style
  lang="less"
  scoped
>
.search-form {
  margin-bottom: 18px;
  display: block;

  /deep/ .ant-form-item .ant-form-item-label {
    min-width: 80px;
  }

  /deep/ .ant-form-item-control-wrapper {
    min-width: 184px;
  }
  .flex-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

.search-tool-row {
  display: flex;
  justify-content: flex-start;

  &:first-child {
    margin-bottom: 14px;
  }
}
.search-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  .search-item {
    padding: 0 22px 6px 0;
    min-width: 360px;
  }
}
/deep/ .ant-form-inline .ant-form-item {
  margin: 0;
}
</style>
